<template>
  <PageWrapper dense contentFullHeight fixedHeight contentClass="flex">
    <CategoryTree
      :key="tree_key"
      class="w-/4 xl:w-1/5"
      :treeData="treeData"
      @expand="handleExpand"
      @select="handleSelect"
    />
    <!-- 搜索区域  -->
    <div class="m-4 w-3/4 xl:w-4/5">
      <searchFrom :searchInfo="searchInfo" @confirmSearch="handleSearch" />
      <BasicGrid :total="total" :gridData="gridData" @pageClick="jumpTo" :searchInfo="searchInfo" />
    </div>
  </PageWrapper>
</template>
<script lang="ts" setup>
  import searchFrom from './SearchFrom.vue'
  import { reactive, ref } from 'vue'
  import { BasicGrid } from '/@/components/Grid'
  import { productInfoApi } from '/@/api/demo/product'
  import { PageWrapper } from '/@/components/Page'
  import CategoryTree from './CategoryTree.vue'
  import { columns, searchFormSchema } from './category.data'
  import { categoryWtApi, getCategoryChildren } from '/@/api/demo/category'
  import { TreeItem } from '/@/components/Tree'
  import { Loading, useLoading } from '/@/components/Loading'

  const [openFullLoading, closeFullLoading] = useLoading({
    tip: '加载中...',
  })

  const searchInfo = reactive<Recordable>({
    page: 1,
    domainId: '',
    pageSize: 30,
  })
  const gridData = ref([])
  const total = ref(0)
  const tree_key = ref('')
  const treeData = ref<TreeItem[]>([])

  function treeDataFetch(params) {
    openFullLoading()
    categoryWtApi(params).then(
      (res) => {
        treeData.value = res
        tree_key.value = Math.random(0, 10000)
        closeFullLoading()
      },
      (error) => {
        console.log(error)
      },
    )
  }

  function getCardData() {
    console.log(searchInfo)
    gridData.value = []
    openFullLoading()
    productInfoApi(searchInfo).then(
      (res) => {
        gridData.value = res.items
        total.value = res.total
        closeFullLoading()
      },
      () => {
        closeFullLoading()
        total.value = 0
        gridData.value = []
      },
    )
  }

  function reload() {
    getCardData()
  }

  function handleSelect(catId = '') {
    searchInfo.page = 1
    searchInfo.catId = catId
    reload()
  }

  function handleExpand(catId) {
    var param = { catId: catId }
    getCategoryChildren(param).then(
      (res) => {
        updateNodeChildren(catId, res)
      },
      (error) => {
        console.log(error)
      },
    )
  }

  function updateNodeChildren(nodeId, children) {
    // 遍历树形数据，找到要更新的节点
    traverseAndUpdateChildren(treeData.value, nodeId, children)
  }

  function traverseAndUpdateChildren(nodes, targetNodeId, newChildren) {
    // 递归遍历树形数据，找到要更新的节点
    nodes.forEach((node) => {
      if (node.catId === targetNodeId) {
        // 更新节点的子节点
        node.children = newChildren
      } else if (node.children) {
        // 继续递归遍历子节点
        traverseAndUpdateChildren(node.children, targetNodeId, newChildren)
      }
    })
  }

  function handleSearch(formData) {
    console.log(formData)
    searchInfo.catId = ''
    searchInfo.domainId = parseInt(formData.domainId)
    searchInfo.month = formData.month
    reload()
    treeDataFetch(searchInfo)
  }

  function jumpTo(pageNumber) {
    searchInfo.page = pageNumber
    reload()
  }
</script>
